import React, { Component } from 'react';
import { List, Avatar, Space, Tag } from 'antd';
import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
import { colors } from '@/components/tags';

import httpRequest from '@/utils/request';
import './style.less';
import { stringify } from 'querystring';
export interface Props {}
export interface State {
  list: any[];
  tagList: { id: string; tagname: string }[];
}

const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

class BlockList extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      list: [],
      tagList: [],
    };
  }

  async componentDidMount() {
    const res = await httpRequest.get('/block');
    const { data } = await httpRequest.get('/tag');
    this.setState(state => ({
      list: res.data,
      tagList: data,
    }));
  }

  genContent = (content: string) => {
    const div = document.createElement('div');
    div.innerHTML = content;
    return div.innerText;
  };

  renderTags = (tagStr: string) => {
    if (!tagStr) return;
    const tags = tagStr.split(',');
    return tags.map((id, index) => (
      <Tag key={id} color={colors[Number(index) % 11]}>
        {this.state.tagList.find(v => v.id === id)?.tagname}
      </Tag>
    ));
  };

  render() {
    return (
      <div className="block_list">
        <List
          itemLayout="vertical"
          size="large"
          pagination={{
            onChange: page => {
              console.log(page);
            },
            pageSize: 3,
          }}
          dataSource={this.state.list}
          footer={
            <div>
              <b>ant design</b> footer part
            </div>
          }
          renderItem={item => (
            <List.Item
              key={item.title}
              actions={[
                <IconText
                  icon={StarOutlined}
                  text="156"
                  key="list-vertical-star-o"
                />,
                <IconText
                  icon={LikeOutlined}
                  text="156"
                  key="list-vertical-like-o"
                />,
                <IconText
                  icon={MessageOutlined}
                  text="2"
                  key="list-vertical-message"
                />,
              ]}
              extra={
                <img
                  width={272}
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<h2>{item.title}</h2>}
                description={'fenlei'}
              />
              <div className="content">{this.genContent(item.htmlContent)}</div>
              <div className="tag">{this.renderTags(item.tagIds)}</div>
            </List.Item>
          )}
        />
        ,
      </div>
    );
  }
}

export default BlockList;
